<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>造轮子·懒加载库</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        .img-border{
            border:hotpink 1px solid
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <h1>造轮子：LazyLoad 演示</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <img src="img/loading.gif" alt="" data-lazyload="img/1.jpg">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <img src="img/loading.gif" alt="" data-lazyload="img/1.jpg">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <img src="img/loading.gif" alt="" data-lazyload="img/1.jpg">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <img src="img/loading.gif" alt="" data-lazyload="img/1.jpg">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate, rem molestiae? Hic sapiente iusto
            ea, inventore at adipisci, incidunt consequatur laborum aliquam quia magnam dolore labore consectetur
            quisquam officia!</p>

        <img src="img/loading.gif" alt="" data-lazyload="img/1.jpg">

    </div>
    <script src="./src/js/core.js"></script>
    <script>
        let t1 = new LazyLoad({
            useDebounce:true,
            debounceTime:200,
            methods:{
                f1(){
                    console.log('这个是事件1',this);
                },
                f2(){
                    this.className = "img-border";
                    console.log('这个是事件2',this);
                }
            }
        });
        console.log(t1);

        // var test1 = document.querySelector("img[data-lazyload='img/5.jpg']");
        // console.log(test1.getBoundingClientRect().top,test1.offsetTop);
        // var test2 = document.querySelector("img[data-lazyload='img/4.jpg']");
        // console.log(test2.getBoundingClientRect().top,test2.offsetTop);


    </script>
</body>

</html>